import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";
import postcssPxToViewport from "postcss-px-to-viewport";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  server: {
    // port: 8001,
  },
  build: {
    outDir: "../server/public/dist",
    target: "es2015",
    minify: "esbuild",
  },
  css: {
    postcss: {
      plugins: [
        // postcssPresetEnv(),
        postcssPxToViewport({
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 375, // UI设计稿的宽度
          unitPrecision: 4, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          exclude: [],
          landscape: false, // 是否处理横屏情况
          // landscapeUnit: 'vw', // 横屏时使用的单位
          // landscapeWidth: 1338, // 横屏时使用的视口宽度
        }),
      ],
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          "@primary-color": "#4377FE", //设置antd主题色
        },
      },
    },
  },
  plugins: [
    react(),
    VitePWA({
      registerType: "prompt",
      manifest: {
        short_name: "福临超市",
        name: "Your Application Name",
        start_url: "/?fullscreen=true",
        display: "fullscreen", // 使 PWA 全屏显示
        background_color: "#ffffff",
        theme_color: "#000000",
        // 为了方便，使用svg图标
        icons: [
          {
            src: "/img/app_icon.png",
            sizes: "152x152",
            type: "image/png",
          },
          {
            src: "/img/app_icon.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "/img/app_icon.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      },
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
            handler: "CacheFirst",
            options: {
              cacheName: "images-cache",
              expiration: {
                maxEntries: 50,
                maxAgeSeconds: 30 * 24 * 60 * 60, // 缓存时间（秒）
              },
            },
          },
        ],
      },
      devOptions: {
        // 如果想在`vite dev`命令下调试PWA, 必须启用它
        enabled: true,
        // Vite在dev模式下会使用浏览器原生的ESModule，将type设置为`"module"`与原先的保持一致
        type: "module",
      },
    }),
  ],
});
